<template>
	<view class="tpf-input-message-wrap">
		<input type="text" 
		class="tpf-input-message"
		:placeholder="placeholder" 
		placeholder-class="tpf-input-message-holder" 
		v-model="inputValue"
		@confirm="confirmSend"
		:focus="focus"
		@focus="messageFocus"
		@blur="messageBlur"
		/>
		<view class="tpf-message-send" @tap.stop="confirmSend">
			<tpf-icon :fontFamily="inputConfig.fontFamily" :text="inputConfig.sendText.text" :textStyle="inputConfig.textStyle" @iconTap="iconTap"></tpf-icon>
		</view>
	</view>
	
</template>

<script>
import config from './tpf-input-message.js'
export default{
	name:"TpfInputMessage",
	mixins:[config],
	data(){
		return {
			inputValue:""
		}
	},
	props:{
		placeholder:{
			type:String,
			default:"评论..."
		},
		focus:{
			type:Boolean,
			default:false
		}
	},
	methods:{
		confirmSend(){
			this.$emit("confirmSend",this.inputValue);
		},
		messageFocus(e){
			this.$emit("focus",e);
		},
		messageBlur(e){
			this.$emit("blur",e);
		},
		iconTap(e){}
	}
}
</script>

<style lang="scss">
.tpf-input-message-wrap{
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	background-color: #F4F5F6;
	font-size: $uni-font-size-base;
	color: #333;
	padding:16rpx;
	.tpf-input-message{
		flex: 1;
		background-color: #FFF;
		padding:16rpx;
		line-height:60rpx;
		height:60rpx;
	}
	.tpf-input-message-holder{
		color: #e8e8e8;
	}
	.tpf-message-send{
		width: 60rpx;
		background-color: #007AFF;
		border-radius: 10rpx;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
	}
}
</style>
